<template>
	<div class="flexcenter">
		<div class="max_width paddingtb justify_between align_start">
			<!-- 论坛列表 -->
			<div class="ffffff radius paddinglr padding_bottom" style="width: 75%;">
				<div class="margin_top pointer" :class="index != list.data.length-1 ? 'padding_bottom line_bottom' : ''"
					v-for="(item, index) in list.data" :key="item.id" @click="goInfo(item.id)">
					<div class="flex">
						<img class="imgBox margin_right1" :src="item.user.avatar" alt="">
						<div class="flex1">
							<div class="flexbetween">
								<div>
									<div class="text_ft color_three">{{ item.user.nickname }}</div>
									<div class="text_b color_nine margin_top1">{{ item.createtime_text }}</div>
								</div>
								<!-- 审核状态 -->
								<div class="stateBox1" v-show="item.state == 1">审核中</div>
								<div class="stateBox2" v-show="item.state == 2">已通过</div>
								<div class="stateBox3" v-show="item.state == 3">已拒绝</div>
							</div>
							<div class="margin_top2 text_f color_three word_wrap lianghang">
								{{ item.title }}
							</div>
							<div class="margin_top2 text_f color_nine word_wrap lianghang">
								{{ item.description }}
							</div>
							<div class="flexleft flex_wrap">
								<div class="img_box margin_top2" v-for="(value, i) in item.images_arr" :key="i">
									<img :src="value" alt="">
								</div>
							</div>
							<!-- 论坛状态为已通过显示底部操作按钮 -->
							<div class="flexbetween">
								<div class="flexleft margin_top2">
									<i class="el-icon-chat-line-square margin_right1"></i>
									<span class="text_d color_six">{{ item.comment_num }}</span>
								</div>
								<div class="flexleft margin_top2" @click="updown(item)" v-if="item.status=='normal'">
									<!-- <i class="el-icon-arrow-up margin_right1"></i> -->
									<i class="el-icon-arrow-down margin_right1"></i>
									<span class="text_d color_six">下架</span>
								</div>
								<div class="flexleft margin_top2" @click="updown(item)" v-if="item.status=='hidden'">
									<i class="el-icon-arrow-up margin_right1"></i>
									<span class="text_d color_six">上架</span>
								</div>
								<el-popconfirm title="确定删除此论坛吗？" @confirm="remove(item.id)">
									<div class="flexleft margin_top2" slot="reference">
										<i class="el-icon-delete margin_right1"></i>
										<span class="text_d color_six">删除</span>
									</div>
								</el-popconfirm>
								<!-- <div class="flexleft margin_top2" @click="remove(item.id)">
									<i class="el-icon-delete margin_right1"></i>
									<span class="text_d color_six">删除</span>
								</div> -->
							</div>
							<!-- 状态为已拒绝显示 -->
							<div class="refuse margin_top" v-show="item.state == 3">
								原因：{{item.error_reason}}
							</div>
						</div>
					</div>
				</div>
				<div class="flexcenter margin_top" v-if="list.total>15">
					<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
						@current-change="listChange">
					</el-pagination>
				</div>
			</div>
			<!-- 操作 -->
			<div class="mainpadding ffffff radius flexcenter" style="width: 23%;">
				<div class="flex1">
					<div class="flexcenter">
						<img class="userImg" :src="userInfo.avatar" alt="">
					</div>
					<div class="text_ft color_three margin_top2 textcenter">{{userInfo.nickname}}</div>
					<div class="release margin_top2 pointer" @click="dialogVisible = true">我要发布</div>
				</div>
			</div>
		</div>
		<!-- 发布论坛弹窗 -->
		<el-dialog title="发布论坛" :visible.sync="dialogVisible" width="30%" center top="20vh" :before-close="handleClose">
			<div class="flexleft">
				<div class="text_d color_zero margin_right1 white_nowrap">文章标题：</div>
				<el-input v-model="title" placeholder="请输入标题"></el-input>
			</div>
			<div class="flex margin_top2">
				<div class="text_d color_zero margin_right1 margin_top1 white_nowrap">文章描述：</div>
				<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" resize="none" show-word-limit
					maxlength="150" placeholder="请输入描述内容" v-model="description">
				</el-input>
			</div>
			<div class="flex margin_top2">
				<div class="text_d color_zero margin_right1 margin_top1 white_nowrap">上传图片：</div>
				<el-form label-width="0px">
					<el-form-item>
						<el-upload :headers="{
					'Token':tokens
				}" class="avatar-uploader" :limit="8" action="http://kaoshi.kongzhongwangluo.top/api/common/upload"
							:show-file-list="false" multiple :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload" :on-exceed="handleExceed">
							<el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
						<font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传8张图片</font>
					</el-form-item>
					<el-form-item>
						<ul class="flexleft">
							<li v-for="(item,index) in ossFileUploads" :key="index" style="position: relative;"
								class="noImage margin_right1 pointer">
								<img :src="item.filePath.fullurl" class="noImage"
									@click.stop="dialogVisible=true;dialogImageUrl=item.filePath.fullurl;">
								<i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;"
									class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i>
							</li>
						</ul>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="submit()">立即发布</el-button>
			</span>
		</el-dialog>
		<!-- 禁止发布论坛弹窗 -->
		<el-dialog title="禁止发布" :visible.sync="noDialogVisible" width="35%" center top="30vh"
			:before-close="NoHandleClose">
			<div class="textcenter text_f color_three">
				<span>由于您违反平台规定，现对您处以禁止发布</span>
				<span class="color_red">60小时</span>
				<span>处罚！</span>
			</div>
			<!-- 处罚倒计时 -->
			<div class="flexcenter margin_top">
				<div class="text_d color_red">处罚倒计时：</div>
				<div class="flexleft">
					<div class="flexleft">
						<div class="timeBox">40</div>
						<div class="text_d color_red">:</div>
					</div>
					<div class="flexleft">
						<div class="timeBox">40</div>
						<div class="text_d color_red">:</div>
					</div>
					<div class="flexleft">
						<div class="timeBox">56</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="noDialogVisible = false">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { getMyList, getDelList, getUpdown,getPublush } from "@/API/forum"
	import { getUserInfo } from "@/API/mine"
	export default {
		data() {
			return {
				dialogVisible: false, //发布
				noDialogVisible: false, //禁止发布
				list: {
					data: []
				},
				ossFileUploads: [], //图片
				tokens: "",
				title: "",//标题
				description: "",//描述
				userInfo:{}
			}
		},
		created() {
			this.tokens = localStorage.getItem("token")
			this.getList()
			this.getInfo()
		},
		methods: {
			async getInfo() {
				let res = await getUserInfo()
				this.userInfo=res.data.data
			},
			async getList(page) { //论坛列表
				let res = await getMyList({
					page: page || 1,
					// state:""
				})
				this.list = res.data.data
				this.list.data = res.data.data.data
			},
			async updown(item) { //上下架
				let res = await getUpdown({ id: item.id })
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					item.status = item.status == 'normal' ? 'hidden' : 'normal'
				} else {
					this.$message.error(res.data.msg)
				}
			},
			goInfo(id) { //论坛详情
				this.$router.push({
					path: "/forum/forumInfo",
					query: {
						id
					}
				})
			},
			async remove(id) { //删除
				let res = await getDelList({ id })
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					this.getList()
				} else {
					this.$message.error(res.data.msg)
				}
			},
			// 上传图片
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
				const isLt2M = file.size / 1024 / 1024 < 10;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是jpg或者png格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(res, file) {
				if (res.code !== 1) {
					this.$message.error(res.msg);
					return false;
				}
				// 图片上传成功，添加到图片数组中，进行渲染
				this.ossFileUploads.push({
					filePath: res.data,
					type: "blood",
					dataId: file.uid
				})
				this.$message.success('上传成功')
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 8 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			// 删除图片
			handlerDel(item, index) {
				this.ossFileUploads.splice(index, 1)
				this.$message.success('删除成功')
			},
			async submit() { //发布论坛
				if (!this.title) {
					this.$message.error("请输入标题")
					return false
				}
				if (!this.description) {
					this.$message.error("请输入描述")
					return false
				}
				let arr = []
				this.ossFileUploads.forEach(item => {
					arr.push(item.filePath.url)
				})
				let res = await getPublush({
					title: this.title,//标题
					description: this.description,//描述
					images: arr.join()
				})
				if (res.data.code == 1) {
					this.$message.success(res.data.msg)
					this.title = ""
					this.description = ""
					this.ossFileUploads = []
					this.getList()
				} else {
					this.$message.error(res.data.msg)
				}
				this.dialogVisible = false
			},
			handleClose(done) {
				done();
			},
			NoHandleClose(done) {
				done();
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 论坛列表 */
	.imgBox {
		width: 50px;
		min-width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.img_box {
		width: 20%;
		display: flex;
		justify-content: flex-start;

		img {
			width: 121px;
			height: 122px;
			border-radius: 9px 9px 9px 9px;
		}
	}

	.stateBox1 {
		padding: 10px 20px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px 4px 4px 4px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	.stateBox2 {
		padding: 10px 20px;
		background: rgba(0, 200, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #00C800;
	}

	.stateBox3 {
		padding: 10px 20px;
		background: rgba(255, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.refuse {
		padding: 20px;
		background: rgba(255, 0, 0, .1);
		border-radius: 8px 8px 8px 8px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	/* 操作 */
	.userImg {
		width: 41px;
		min-width: 41px;
		height: 41px;
		border-radius: 50%;
	}

	.release {
		padding: 10px;
		text-align: center;
		background: #3478F5;
		border-radius: 8px 8px 8px 8px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	::v-deep .el-dialog {
		border-radius: 8px;
	}

	::v-deep .el-dialog__title {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	::v-deep .el-button {
		width: 244px;
		/* // height: 38px; */
		background: #3478F5;
		border-radius: 4px 4px 4px 4px;
		font-size: 12px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.noImage {
		width: 76px;
		min-width: 76px;
		height: 76px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	/* 处罚倒计时 */
	.timeBox {
		padding: 2px;
		background: #FF0000;
		border-radius: 2px 2px 2px 2px;
		font-size: 14px;
		font-family: DIN Next LT Pro-Regular, DIN Next LT Pro;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 2px;
	}
</style>